<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-tree :data="data" :props="defaultProps">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" v-if="data.level == 0" @click="add(data)">
                添加
              </el-button>
              <el-button type="text" size="mini" v-if="data.level == 1" @click="remove(data)">
                删除
              </el-button>
            </span>
          </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <div style="height: 100%;width: 100%;background-color: red"></div>
        </div>
      </el-col>

    </el-row>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
  data: [],
  defaultProps: {
    children: 'children',
    label: 'title'
  }
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  add(data){
    console.log("添加节点被选中",data)
  },
  remove(data){
    console.log("删除节点被选中",data)
  },

  getMenu(){
    this.$http({
      url: 'sys/menu/getMenu',
      method: 'post',
      data: this.$http.adornData({
        id: sessionStorage.getItem("roleId")
      })
    }).then((res)=>{
      this.data = res.data.menu
    })
  }
},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.getMenu()
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
*{
  line-height: 0;
}
button{
  margin-left: 40px;
}

</style>
